<template>
	<div>
		<el-select style="width:650px;" show-word-limit clearable v-model="props.paramter" filterable remote
			reserve-keyword placeholder="请输入派工单号/订单号(单据后五位)" remote-show-suffix :remote-method="remoteMethod" :loading="loading"
			@change="selectChange">
			<el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.value" />
		</el-select>
	</div>
</template>

<script lang="ts" setup>
	import { onMounted, ref } from 'vue';
	import _ from 'lodash';
	import request from '/@/utils/request';
	interface ListItem {
		id : number,
		key : string,
		label : string,
		value : any
	}
	var props = defineProps({
		paramter: {
			type: String,
			default: "",
		},
		info: {
			default: {}
		}
	});
	const options = ref<ListItem[]>([])
	const loading = ref(false)
	let value = ref<any>()
	//定义一个回调方法
	const emit = defineEmits(["callBack"]);

	onMounted(async () => {
		if (props.paramter != null && props.paramter != "")
			await remoteMethod(props.paramter)
	})
	const remoteMethod = _.debounce(async (query : string) => {
		if (query) {
			loading.value = true
			var res = await getInfos(query);
			setTimeout(() => {
				loading.value = false
				options.value = res;
			}, 200)
		} else {
			options.value = []
		}
	}, 1000);

	const getInfos = async (query : string) => {
		let customQueryType = 0;
		if (props.info.customQueryType != undefined)
			customQueryType = props.info.customQueryType;
       
		var url = `api/Common/PoWorkOrderList/${query}/${customQueryType}?wocenCode=${props.info.wocenCode}`
		var res = await request({ url: url, method: 'get' });
		return res.data.result;
	};
	//调用父组件的一个方法将子组件值传过去
	const selectChange = (item) => {
		emit("callBack", item);
	}
</script>